<template>
  <div class="explore-links" @mouseenter="isHover = true" @mouseleave="isHover = false" :style="{ backgroundColor: modelValue?.bgColor }">
    <div
      v-if="list.length > 0"
      class="explore-links__container"
      :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']"
    >
      <h6 class="explore-links__title">更多</h6>
      <ul class="explore-links__list row row-cols-1 row-cols-md-3">
        <li
          v-for="item in list"
          :key="item.id"
          class="col explore-links__item"
        >
          <component
            :is="getLinkComponent(item.link).tag"
            v-bind="getLinkComponent(item.link).props"
            class="explore-links__link link-body-p link--udrline"
          >
            {{ item.name }}
          </component>
        </li>
      </ul>
    </div>
    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
    </div>
  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { http } from '@/utils/http'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'
import { randomString } from '@/utils/common'

defineOptions({
  name: 'ExploreLinks'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  },

  website: {
    type: String,
    default: 'ywies-tx'
  },

  locale: {
    type: String,
    default: 'sc'
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste', 'handleClick', 'showLightboxVideo', 'showLightboxImage'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'ExploreLinks',
    width: props.modelValue?.width ||  '',
    bgColor: props.modelValue?.bgColor || '',
    api: props.modelValue?.api || '/templated-website/production/current-page/explore',
    count: props.modelValue?.count || 6
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}

handleInit()

const list = ref<any[]>([])

const getLinkComponent = (link: any) => {
  if (!link) {
    return {
      tag: "div",
      props: {},
    };
  }
  if (link.startsWith("http")) {
    return {
      tag: "a",
      props: {
        href: link,
        target: "_blank",
      },
    };
  }
  if (link.startsWith("?") || link.startsWith("#") || link.startsWith("/")) {
    const url = link.startsWith("?") ? window?.location.href.split("?")[0] + link : link.startsWith("#") ? window?.location.href.split("#")[0] + link : link;
    return {
      tag: "div",
      props: {
        onClick: () => handleClick(url),
      },
    };
  }
  return {
    tag: "a",
    props: {
      href: link,
      target: "_blank",
    },
  };
}

const setList = async () => {
  const config = {
    headers: {
      website: `${props.website}-${props.locale}`,
    },
  };
  const url = `${props.modelValue?.api}?count=${props.modelValue?.count}`;
  const { data } = await http.get(url, config);
  list.value =  data.data;
}

onMounted(() => {
  setList()
})
</script>

<style lang="scss" scoped>
.explore-links {
  position: relative;
}

.explore-links__title {
  color: #2a3b4d;
  padding-bottom: 18px
}

@media(max-width: 767.98px) {
  .explore-links__title {
      padding-bottom:8px
  }
}

.explore-links__item {
  padding-top: 8px;
  display: flex
}

.row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y)*-1);
  margin-right: calc(var(--bs-gutter-x)*-0.5);
  margin-left: calc(var(--bs-gutter-x)*-0.5)
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)*0.5);
  padding-left: calc(var(--bs-gutter-x)*0.5);
  margin-top: var(--bs-gutter-y)
}

.col {
  flex: 1 0 0%
}

.row-cols-1>* {
  flex: 0 0 auto;
  width: 100%
}

@media(min-width: 768px) { 
  .row-cols-md-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%
  }
}

.link,.link-body-p,.link-caption,.link-overline {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: #0048e8;
  color: var(--text-color,#0048e8)
}

.link-body-p:hover,.link-caption:hover,.link-overline:hover,.link:hover {
  color: #0048e8;
  color: var(--text-color,#0048e8)
}

.link-body-p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  --text-color: #0048e8
}

@media(max-width: 1023.98px) {
  .link-body-p {
      font-size:14px;
      line-height: 1.714;
      letter-spacing: .01em
  }
}

.link-body-p.link--udrline:after {
  transform: scaleX(0) translateY(-.22em)
}

.link-body-p.link--udrline:hover:after {
  transform: scaleX(1) translateY(-.22em)
}

.link--udrline {
  flex-direction: column
}

.link--udrline:after {
  content: "";
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #0048e8;
  background-color: var(--text-color,#0048e8);
  transform: scaleX(0);
  transition: all .3s ease-in-out
}

 .tx-h6,h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33
}

@media(max-width: 1023.98px) {
  .tx-h6,h6 {
    font-size:16px;
    line-height: 1.25;
    letter-spacing: .01em
  }
}

@media(max-width: 767.98px) {
  .tx-h6,h6 {
    line-height:1.5
  }
}
</style>
